﻿@using HuskyRescue.Web.Infrastructure.Extensions;
@{
	Layout = "~/Views/Shared/_LayoutAdminF.cshtml";
}

@section JavaScript
{
	<script type="text/javascript">
		$(document).ready(function () {
			var getAdapter = function () {
				// prepare the data
				var source =
					{
						datatype: "json",
						datafields: [
							 { name: 'SettingName', type: 'string' },
							 { name: 'SettingValue', type: 'string' },
							 { name: 'SettingDescription', type: 'string' },
							 { name: 'CategoryName', type: 'string' },
							 { name: 'CategoryDescription', map: 'Category>Description', type: 'string' }
						],
						url: '/System/GetSettings',
						updaterow: function (rowid, rowdata, commit) {
							// synchronize with the server - send update command
							var data = {
								SettingName: rowdata.SettingName,
								SettingValue: rowdata.SettingValue,
								SettingDescription: rowdata.SettingDescription,
								CategoryName: rowdata.CategoryName
							};
							//var json = $.toJSON(data);
							var json = JSON.stringify(data);
							$.ajax({
								dataType: 'json',
								contentType: 'application/json; charset=utf-8',
								url: '/System/UpdateSetting',
								data: json,
								type: 'POST',
								success: function (data, status, xhr) {
									if (data.Success) {
										// update command is executed.
										commit(true);
									}
									else {
										commit(false);
									}
								},
								error: function (jqXHR, textStatus, errorThrown) {
									// update failed.
									commit(false);
								}
							});
						}
					};

				var dataAdapter = new $.jqx.dataAdapter(source);
				return dataAdapter;
			}
			// initialize jqxGrid
			$("#grid").jqxGrid({
				autoheight: true,
				autorowheight: true,
				editable: true,
				filterable: true,
				pageable: true,
				pagesize: 25,
				pagesizeoptions: ['25', '50', '100'],
				selectionmode: 'singlecell',
				showstatusbar: true,
				sortable: true,
				source: getAdapter(),
				width: '100%',
				columns: [
					{ text: "Category Name", datafield: "CategoryName" },
					{ text: "Category Description", datafield: "CategoryDescription" },
					{ text: "Setting Name", datafield: "SettingName" },
					{ text: "Setting Value", datafield: "SettingValue" },
					{ text: "Setting Description", datafield: "SettingDescription" }
				],
				renderstatusbar: function (statusbar) {
					// appends buttons to the status bar.
					var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
					var addButton = $("<div style='float: left; margin-left: 5px;'><i class='icon-plus-sign'></i><span style='margin-left: 4px; position: relative; top: -3px;'>Add</span></div>");
					var deleteButton = $("<div style='float: left; margin-left: 5px;'><i class='icon-remove-sign'></i><span style='margin-left: 4px; position: relative; top: -3px;'>Delete</span></div>");
					var reloadButton = $("<div style='float: left; margin-left: 5px;'><i class='icon-refresh'></i><span style='margin-left: 4px; position: relative; top: -3px;'>Reload</span></div>");
					container.append(addButton);
					container.append(deleteButton);
					container.append(reloadButton);
					statusbar.append(container);
					addButton.jqxButton({ width: 80, height: 20 });
					deleteButton.jqxButton({ width: 85, height: 20 });
					reloadButton.jqxButton({ width: 85, height: 20 });
					// add new row.
					addButton.click(function (event) {
						$("#grid").jqxGrid('addrow', null, {});
					});
					// delete selected row.
					deleteButton.click(function (event) {
						var selectedrowindex = $("#grid").jqxGrid('getselectedcell').rowindex;
						var rowscount = $("#grid").jqxGrid('getdatainformation').rowscount;
						if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
							var id = $("#grid").jqxGrid('getrowid', selectedrowindex);
							var commit = $("#grid").jqxGrid('deleterow', id);
						}
					});
					// reload grid data.
					reloadButton.click(function (event) {
						$("#grid").jqxGrid({ source: getAdapter() });
					});
				}
			});
			$("#grid").on('cellvaluechanged', function (event) {
				var column = args.datafield;
				var row = args.rowindex;
				var value = args.newvalue;
				var oldvalue = args.oldvalue;
				var datafield = args.datafield;

				var details = $('#grid').jqxGrid('getrowdetails', row);

				//alert(datafield + "; " + column + "; " + row + "; " + value + "; " + oldvalue);
			});
		});
	</script>
}

<div id="grid"></div>
